<template>
	<view>
		<view class="head-cont">
			<view class="head-c-box">
				<image src="../../static/logo.png" mode=""></image>
				<view class="h-c-right">
					<view class="hc-r-top">
						<view class="h-c-name">lhh</view>
						<view class="h-c-firm">云合之家有限公司</view>
					</view>
					<view class="h-c-time">2021-08-02 12:00</view>
				</view>
			</view>
			<view class="h-content">
				中国好声音中国好声音中国好声音.中国好声音中国好声音中国好声音中国好.声音中国好声音.中国好声音中国.好声音
			</view>
		</view>
		<view class="all-comment">
			<view class="all-tit">全部评论</view>
			<view v-if="list.length == 0" class="no-tit">快来发表你的评论吧...</view>
			<view v-else v-for="item,i in list" :key="i">
				<view class="com-cont">
					<view class="com-c-left">
						<image class="com-c-h-img" :src="item.user_info.head_img" mode=""></image>
						<view class="com-c-name">{{ item.user_info.name }}</view>
					</view>
					<view class="com-c-right">
						<image class="com-c-dz" src="/static/dianzan.png" mode=""></image>
						<text>100</text>
					</view>
				</view>
				<view class="com-c-content">{{ item.comment }}</view>
				<view class="com-b-time">{{ item.created_at}}</view>
				<view class="com-bot-line"></view>
			</view>
		</view>
		<view class="bot-com">
			<view class="com-img">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<input v-model="commentCont" @keydown.enter="sendCommont" placeholder="写评论..." />
			<button v-if="commentCont!==''" @click="sendCommont()">发送</button>
			<view v-else></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				list:[],
				commentCont:'',
			}
		},
		onLoad(e) {
			this.id = e.listen_id
			this.getCommont()
		},
		methods: {
			// 获取评论
			async getCommont(){
				const res = await this.get('/Index/User/get_school_studen_listen_comment_list', {school_student_listen_id: this.id})
				this.list = res.data
			},
			// 发送评论
			async sendCommont(){
				const res = await this.get('/Index/User/add_school_student_listen_comment', {school_student_listen_id: this.id, comment: this.commentCont,})
				if(res.code == 200){
					uni.showToast({
						title:"发送成功",
						duration:1000,
						success: () => {
							this.getCommont()
							this.commentCont = ''
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head-cont{
		.head-c-box{
			display: flex;
			margin: 30upx 26upx;
			image{
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
			.h-c-right{
				margin-left: 24upx;
				.hc-r-top{
					display: flex;
					align-items: center;
					margin-bottom: 10upx;
					.h-c-name{
						color: #101010;
						font-size: 28upx;
						margin-right: 22upx;
					}
					.h-c-firm{
						color: #A9ABAE;
						font-size: 24upx;
					}
				}
				.h-c-time{
					color: #A9ABAE;
					font-size: 24upx;
				}
			}
		}
		.h-content{
			color: #101010;
			font-size: 28upx;
			line-height: 45upx;
			margin: 0 26upx 60upx 26upx;
		}
	}
	.all-comment{
		padding: 0 30upx 130upx 30upx;
		.all-tit{
			color: #131313;
			font-size: 28upx;
			font-weight: bold;
		}
		.no-tit{
			color: #b1b1b1;
			font-size: 32upx;
			text-align: center;
			margin-top: 100upx;
		}
		.com-cont{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 45upx;
			.com-c-left{
				display: flex;
				align-items: center;
				.com-c-h-img{
					width: 44upx;
					height: 44upx;
					border-radius: 50%;
				}
				.com-c-name{
					color: #8A8A8A;
					font-size: 26upx;
					margin-left: 10upx;
				}
			}
			.com-c-right{
				display: flex;
				align-items: center;
				.com-c-dz{
					width: 32upx;
					height: 32upx;
					margin-right: 5upx;
				}
				text{
					color: #7b7b7b;
					font-size: 24upx;
				}
			}
		}
		.com-c-content{
			color: #444444;
			font-size: 26upx;
			margin: 20upx 0 30upx 55upx;
		}
		.com-b-time{
			color: #8A8A8A;
			font-size: 20upx;
			margin: 0 0 15upx 55upx;
		}
		.com-bot-line{
			height: 2upx;
			width: 640upx;
			margin-left: 55upx;
			background-color: #eeeeee;
		}
	}
	.bot-com{
		width: 100%;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		padding: 20upx 30upx;
		box-shadow: 0 -5upx 5upx 0 rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		.com-img{
			image{
				width: 44upx;
				height: 44upx;
				margin-top: 8upx;
				border-radius: 50%;
			}
		}
		input{
			width: 100%;
			height: 68upx;
			font-size: 28upx;
			margin: 0 10upx;
			padding: 0 20upx;
			border-radius: 40upx;
			border: 2upx solid #c0c4cc;
			position: relative;
		}
		button{
			height: 68upx;
			width: 150upx;
			color: #3291F8;
			font-size: 28upx;
			line-height: 68upx;
			border-radius: 50upx;
			background-color: #FFFFFF;
			border: 2upx solid #3291F8;
		}
	}
</style>
